$(function () {
    var btn_init = $("#init");
    var btn_break = $("#break");

    var div_blocks = $(".cube-bloc");

    var btnU = document.getElementById("U");
    var btnL = document.getElementById("L");
    var btnR = document.getElementById("R");
    var btnD = document.getElementById("D");
    var btnF = document.getElementById("F");
    var btnB = document.getElementById("B");
    var btnU_ = document.getElementById("U-");
    var btnL_ = document.getElementById("L-");
    var btnR_ = document.getElementById("R-");
    var btnD_ = document.getElementById("D-");
    var btnF_ = document.getElementById("F-");
    var btnB_ = document.getElementById("B-");
    var btnTR = document.getElementById("TR");
    var btnTL = document.getElementById("TL");
    var btnTD = document.getElementById("TD");
    var btnTU = document.getElementById("TU");
    var btnLR = document.getElementById("LR");
    var btnRL = document.getElementById("RL");

    /**面*/
    var fF = $(".f");
    var bF = $(".b");
    var rF = $(".r");
    var lF = $(".l");
    var uF = $(".u");
    var dF = $(".d");

    var content = $(".content");
    var box=$(".box");

    var tf = "transform";

    fF.css(tf, "translateZ(150px)");
    bF.css(tf, "translateZ(-150px) rotateY(180deg)");
    rF.css(tf, "translateX(150px) rotateY(90deg)");
    lF.css(tf, "translateX(-150px) RotateY(-90deg)");
    uF.css(tf, "translateY(-150px) rotateX(90deg)");
    dF.css(tf, "translateY(150px) rotateX(-90deg");

    $(".box").css("opacity", "1");

    box.css(tf, "rotateX(-45deg) rotateY(45deg)");

    var cube = new Cube();

    var blue = 1;
    var green = 2;
    var orange = 3;
    var red = 4;
    var yellow = 5;
    var white = 6;

    function paint(cube, blocks) {
        for (var i = 0; i < 6; i++) {
            for (var j = 0; j < 4; j++) {
                switch (cube.Blocks[i][j]) {
                    case blue:
                        blocks[i * 4 + j].style.backgroundColor = "blue";
                        break;
                    case green:
                        blocks[i * 4 + j].style.backgroundColor = "green";
                        break;
                    case orange:
                        blocks[i * 4 + j].style.backgroundColor = "orange";
                        break;
                    case red:
                        blocks[i * 4 + j].style.backgroundColor = "red";
                        break;
                    case yellow:
                        blocks[i * 4 + j].style.backgroundColor = "yellow";
                        break;
                    case white:
                        blocks[i * 4 + j].style.backgroundColor = "white";
                        break;
                }
            }
        }
    }

    paint(cube, div_blocks);
    /**按钮*/
    {
        btn_break.click(function () {
            cube.Break();
            paint(cube, div_blocks);
        })

        btn_init.click(function () {
            cube.Init();
            paint(cube, div_blocks);
        });

        btnU.onclick = function (ev) {
            cube.RotU();
            cube.reset();
            paint(cube, div_blocks);
        }
        btnL.onclick = function (ev) {
            cube.RotL();
            cube.reset();
            paint(cube, div_blocks);
        }
        btnR.onclick = function (ev) {
            cube.RotR();
            cube.reset();
            paint(cube, div_blocks);
        }
        btnD.onclick = function (ev) {
            cube.RotD();
            cube.reset();
            paint(cube, div_blocks);
        }
        btnF.onclick = function (ev) {
            cube.RotF();
            cube.reset();
            paint(cube, div_blocks);
        }
        btnB.onclick = function (ev) {
            cube.RotB();
            cube.reset();
            paint(cube, div_blocks);
        }


        btnU_.onclick = function (ev) {
            cube._RotU();
            cube.reset();
            paint(cube, div_blocks);
        }
        btnL_.onclick = function (ev) {
            cube._RotL();
            cube.reset();
            paint(cube, div_blocks);
        }
        btnR_.onclick = function (ev) {
            cube._RotR();
            cube.reset();
            paint(cube, div_blocks);
        }
        btnD_.onclick = function (ev) {
            cube._RotD();
            cube.reset();
            paint(cube, div_blocks);
        }
        btnF_.onclick = function (ev) {
            cube._RotF();
            cube.reset();
            paint(cube, div_blocks);
        }
        btnB_.onclick = function (ev) {
            cube._RotB();
            cube.reset();
            paint(cube, div_blocks);
        }

        btnTR.onclick = function (ev) {
            RotateY();
            // cube.TR();
            // cube.reset();
            // paint(cube, div_blocks);
        }
        btnTL.onclick = function (ev) {
            _RotateY();
            // cube.TL();
            // cube.reset();
            // paint(cube, div_blocks);
        }
        btnTD.onclick = function (ev) {
            _RotateX();
            // cube.TD();
            // cube.reset();
            // paint(cube, div_blocks);
        }
        btnTU.onclick = function (ev) {
            RotateX();
            // cube.TU();
            // cube.reset();
            // paint(cube, div_blocks);
        }
        btnRL.onclick = function (ev) {
            _RotateZ();
            // cube.RL();
            // cube.reset();
            // paint(cube, div_blocks);
        }
        btnLR.onclick = function (ev) {
            RotateZ();
            // cube.LR();
            // cube.reset();
            // paint(cube, div_blocks);
        }
    }

    var test=$("#test");
    test.click(function () {
        RotateZ();
    })

    function RotateX() {
        var deg=0;
        var timer=setInterval(function () {
            deg++;
            content.css("transform","rotateX("+deg+"deg)");
            if(deg===90){
                clearInterval(timer);
                content.css("transform","");
                cube.TU();
                cube.reset();
                paint(cube, div_blocks);
            }
        },5);
    }
    function _RotateX() {
        var deg=0;
        var timer=setInterval(function () {
            deg--;
            content.css("transform","rotateX("+deg+"deg)");
            if(deg===-90){
                clearInterval(timer);
                content.css("transform","");
                cube.TD();
                cube.reset();
                paint(cube, div_blocks);
            }
        },5);
    }
    function RotateY() {
        var deg=0;
        var timer=setInterval(function () {
            deg++;
            content.css("transform","rotateY("+deg+"deg)");
            if(deg===90){
                clearInterval(timer);
                content.css("transform","");
                cube.TR();
                cube.reset();
                paint(cube, div_blocks);
            }
        },5);
    }
    function _RotateY() {
        var deg=0;
        var timer=setInterval(function () {
            deg--;
            content.css("transform","rotateY("+deg+"deg)");
            if(deg===-90){
                clearInterval(timer);
                content.css("transform","");
                cube.TL();
                cube.reset();
                paint(cube, div_blocks);
            }
        },5);
    }
    function RotateZ() {
        var deg=0;
        var timer=setInterval(function () {
            deg++;
            content.css("transform","rotateZ("+deg+"deg)");
            if(deg===90){
                clearInterval(timer);
                content.css("transform","");
                cube.LR();
                cube.reset();
                paint(cube, div_blocks);
            }
        },5);
    }
    function _RotateZ() {
        var deg=0;
        var timer=setInterval(function () {
            deg--;
            content.css("transform","rotateZ("+deg+"deg)");
            if(deg===-90){
                clearInterval(timer);
                content.css("transform","");
                cube.RL();
                cube.reset();
                paint(cube, div_blocks);
            }
        },5);
    }
});

//产生begin到end（不包含end）之间的随机数
function getRandom(begin, end) {
    var rd = Math.random() * (end - begin);
    rd = Math.floor(rd);
    rd += begin;
    return rd;
}

function Cube() {
    var blue = 1;
    var green = 2;
    var orange = 3;
    var red = 4;
    var yellow = 5;
    var white = 6;


    var U = [yellow, yellow, yellow, yellow];
    var D = [white, white, white, white];
    var F = [blue, blue, blue, blue];
    var B = [green, green, green, green];
    var L = [orange, orange, orange, orange];
    var R = [red, red, red, red];


    this.Blocks = [F, B, L, R, U, D];

    this.Break = function () {
        var index = getRandom(1, 19);
        switch (index) {
            case 1:
                this.RotF();
                break;
            case 2:
                this.RotB();
                break;
            case 3:
                this.RotL();
                break;
            case 4:
                this.RotR();
                break;
            case 5:
                this.RotU();
                break;
            case 6:
                this.RotD();
                break;
            case 7:
                this._RotF();
                break;
            case 8:
                this._RotB();
                break;
            case 9:
                this._RotL();
                break;
            case 10:
                this._RotR();
                break;
            case 11:
                this._RotU();
                break;
            case 12:
                this._RotD();
                break;
            case 13:
                this.TR();
                break;
            case 14:
                this.TL();
                break;
            case 15:
                this.TU();
                break;
            case 16:
                this.TD();
                break;
            case 17:
                this.RL();
                break;
            case 18:
                this.LR();
                break;
        }
    }

    this.Init = function () {
        U = [yellow, yellow, yellow, yellow];
        D = [white, white, white, white];
        F = [blue, blue, blue, blue];
        B = [green, green, green, green];
        L = [orange, orange, orange, orange];
        R = [red, red, red, red];
        this.Blocks = [F, B, L, R, U, D];
    }

    this.reset = function () {
        this.Blocks = [F, B, L, R, U, D];
    }

    this.RotF = function () {
        var T=[F[0],F[1],F[2],F[3]];
        F[1]=T[0];
        F[3]=T[1];
        F[2]=T[3];
        F[0]=T[2];

        var P = [U[2], U[3]];
        U[2] = L[3];
        U[3] = L[1];
        L[1] = D[0];
        L[3] = D[1];
        D[0] = R[2];
        D[1] = R[0];
        R[0] = P[0];
        R[2] = P[1];
    }
    this.RotB = function () {
        var T=[B[0],B[1],B[2],B[3]];
        B[1]=T[0];
        B[3]=T[1];
        B[2]=T[3];
        B[0]=T[2];

        var P = [U[0], U[1]];
        U[0] = R[1];
        U[1] = R[3];
        R[1] = D[3];
        R[3] = D[2];
        D[2] = L[0];
        D[3] = L[2];
        L[0] = P[1];
        L[2] = P[0];
    }
    this.RotL = function () {
        var T=[L[0],L[1],L[2],L[3]];
        L[1]=T[0];
        L[3]=T[1];
        L[2]=T[3];
        L[0]=T[2];

        var P = [U[0], U[2]];
        U[0] = B[3];
        U[2] = B[1];
        B[3] = D[0];
        B[1] = D[2];
        D[0] = F[0];
        D[2] = F[2];
        F[0] = P[0];
        F[2] = P[1];
    }
    this.RotR = function () {
        var T=[R[0],R[1],R[2],R[3]];
        R[1]=T[0];
        R[3]=T[1];
        R[2]=T[3];
        R[0]=T[2];

        var P = [U[1], U[3]];
        U[1] = F[1];
        U[3] = F[3];
        F[1] = D[1];
        F[3] = D[3];
        D[1] = B[2];
        D[3] = B[0];
        B[2] = P[0];
        B[0] = P[1];
    }
    this.RotU = function () {
        var T=[U[0],U[1],U[2],U[3]];
        U[1]=T[0];
        U[3]=T[1];
        U[2]=T[3];
        U[0]=T[2];

        var P = [F[0], F[1]];
        F[0] = R[0];
        F[1] = R[1];
        R[0] = B[0];
        R[1] = B[1];
        B[0] = L[0];
        B[1] = L[1];
        L[0] = P[0];
        L[1] = P[1];
    }
    this.RotD = function () {
        var T=[D[0],D[1],D[2],D[3]];
        D[1]=T[0];
        D[3]=T[1];
        D[2]=T[3];
        D[0]=T[2];

        var P = [F[2], F[3]];
        F[2] = L[2];
        F[3] = L[3];
        L[2] = B[2];
        L[3] = B[3];
        B[2] = R[2];
        B[3] = R[3];
        R[2] = P[0];
        R[3] = P[1]
    }
    this._RotF = function () {
        this.RotF();
        this.RotF();
        this.RotF();
    }
    this._RotB = function () {
        this.RotB();
        this.RotB();
        this.RotB();
    }
    this._RotL = function () {
        this.RotL();
        this.RotL();
        this.RotL();
    }
    this._RotR = function () {
        this.RotR();
        this.RotR();
        this.RotR();
    }
    this._RotU = function () {
        this.RotU();
        this.RotU();
        this.RotU();
    }
    this._RotD = function () {
        this.RotD();
        this.RotD();
        this.RotD();
    }

    /**以上层为参照*/
    //横向
    this.TR = function () {
        this._RotU();
        this.RotD();
    }
    this.TL = function () {
        this.RotU();
        this._RotD();
    }
    //纵向
    this.TD = function () {
        this._RotR();
        this.RotL();
    }
    this.TU = function () {
        this.RotR();
        this._RotL();
    }
    //纵向侧旋转
    this.RL = function () {
        this._RotF();
        this.RotB();
    }
    this.LR = function () {
        this.RotF();
        this._RotB();
    }
}

